<template>
  <div class="card_eContainer">
    <div
      class="card_eTop"
      :style="{ backgroundImage: `url(${props.imageUrl})` }"
    ></div>
    <div class="card_eBottom">
      <slot>
        <card_sub_a />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import defaultImage from "@/assets/png/smg1/gp1.png";
import card_sub_a from "./card_sub_a.vue";

const props = defineProps({
  imageUrl: {
    type: String,
    required: false,
    default: defaultImage,
  },
});
</script>

<style scoped lang="scss">
.card_eContainer {
  @include rel_cen_hw(auto, 355px);
  flex-direction: column;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  //   background-repeat: no-repeat;
  overflow: hidden;
  border: 1px solid #dddddd;
  transition: all 0.5s ease;
  cursor: pointer;

  .card_eTop {
    @include rel_cen_hw(251px, 100%);
  }

  &:hover {
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.09);
  }

  &:active {
    transform: scale(0.91);
  }

  .card_eBottom {
    @include relative_hw(auto, 100%);
  }
}
</style>
